import React, { useRef } from 'react'
import { Button, Input, Form, Checkbox, Space, } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { login } from '../service/userInfoService';


export default function Home(props) {
    const formRef = useRef(null);
    const onFinish = async (values) => {
        console.log(values);
        let { data } = await login({
            username: values.username,
            userpwd: values.userpwd
        })
        console.log(props)
        if (data.code === 1) {
            props.history.push('/menu')
            console.log(data.msg);
        }

    };
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    const onReset = () => {
        formRef.current?.resetFields();
    };

    return (
        <div className='home'>
            <Form
                name="basic"
                labelCol={{
                    span: 6,
                }}
                wrapperCol={{
                    span: 16,
                }}
                style={{
                    maxWidth: 600,
                }}
                initialValues={{
                    remember: true,
                }}
                ref={formRef}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
            >
                <Form.Item
                    label="用户名"
                    name="username"
                    rules={[
                        {
                            required: true,
                            message: '用户名不能为空',
                        },
                    ]}
                >
                    <Input size="large" placeholder="输入用户名" prefix={<LockOutlined />} />
                </Form.Item>

                <Form.Item
                    label="密码"
                    name="userpwd"
                    rules={[
                        {
                            required: true,
                            message: '密码不能为空',
                        },
                    ]}
                >
                    <Input.Password size="large" placeholder="输入密码" prefix={<UserOutlined />} />
                </Form.Item>

                <Form.Item
                    name="remember"
                    valuePropName="checked"
                    wrapperCol={{
                        offset: 6,
                        span: 16,
                    }}
                >
                    <Checkbox>记住密码</Checkbox>
                </Form.Item>

                <Form.Item
                    wrapperCol={{
                        offset: 6,
                        span: 16,
                    }}
                >
                    <Space size={20}>
                        <Button type="primary" htmlType="submit">
                            提交
                        </Button>
                        <Button htmlType="button" onClick={onReset}>
                            清空
                        </Button>
                    </Space>
                </Form.Item>
            </Form>
        </div>
    )
}

